<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div style="height: 4px;position: absolute;z-index: 2222; width: 100%; top: 46px;background: #f0f0f0"></div>
    <div style="height: 50px;"></div>
    <div class="about-us content" v-show="show">
      <div class="money evaluate">
        <div class="head">
          <div class="border"></div>
          <img class="headImg" :src="user_info.headImg"/>
          <p>{{user_info.username}}</p>
        </div>
      </div>
      <ul class="grade">
        <li style="margin-top: -2px;"><img src="../assets/image/pj_pj.png">评级</li>
        <ul class="stars">
          <li v-for="(item,index) in stars" @click="clickStars(index)" :class=" { yellow : index <= starsNum } "></li>
        </ul>
        <span class="anonymous" @click="choiceBtn" :class=" { choice : anonymous } ">匿名</span>
      </ul>
      <div class="evaluate-textarea">
        <textarea placeholder="请在此处写下您对上门师傅的评价..." v-model="info.evaluate_content"></textarea>
      </div>
      <div class="upload">
        <div class="uplodaLi" v-for="(item,index) in photo">
          <div class="fill_img">
            <img :src="item" @click="seeImg(index)" />
            <div class="close" @click="deletes(index)">×</div>
          </div>
        </div>
        <div class="uplodaLi" v-if="photo.length<9" style="background:#fff;">
          <img src="../assets/image/add.png" alt="">
          <div class="file_img">
            <input type="file" name="file" accept="image/gif, image/jpeg, image/png" @change="add_img"/>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottomBtn" @click="submit">评价</div>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  let Jquery = require('Jquery')
  import axios from 'axios'
  import WechatPlugin from 'vux/src/plugins/wechat/index.js'
  import LoadingPlugin from 'vux/src/plugins/loading/index.js'
  import VueResource from 'vue-resource'
  Vue.use(WechatPlugin)
  Vue.use(LoadingPlugin)
  Vue.use(VueResource)
  export default {
    name: 'Evaluate',
    data () {
      return {
        show: true,
        stars: [0, 1, 2, 3, 4],
        starsNum: 4,
        anonymous: false,
        photo: [],
        imgSrc: [],
        image: [],
        info: {
          order_no: '',
          evaluate_store: 5,
          evaluate_content: '',
          evaluate_type: ''
        },
        user_info: {},
        addAjax: true,
        call: ''
      }
    },
    methods: {
      deletes: function (index) {
        this.photo.splice(index, 1)
        this.imgSrc.splice(index, 1)
      },
      duo_img: function (img, backFunction) {
        let thisObj = this
        if (img.length > 0) {
          thisObj.$vux.loading.show({
            text: '图片提交中'
          })
          let formData = new FormData()
          Jquery.each(img, function (k, v) {
            let key = 'image_' + (k + parseInt(1))
            formData.append(key, img[k])
          })
          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          let url = this.$chaos.formatUrl('Index/uploadFileMulti')
          axios.post(url, formData, config
          ).then((res) => {
            if (res.data.status === 'SUCCESS') {
              thisObj.image = res.data.result.relativeUrl
              backFunction('success')
            } else {
              backFunction('error')
            }
          }, () => {
            backFunction('error')
          })
        } else {
          backFunction('success')
        }
      },
      getmode: function (content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website' && sessionStorage[content]) {
          return JSON.parse(sessionStorage[content])
        } else if (mode === 'client' && localStorage[content]) {
          let content = JSON.parse(localStorage[content])
          if (content.expire_time * 1000 < new Date().getTime()) {
            localStorage[content] = null
            return false
          }
          return content
        } else {
          return false
        }
      },
      add_img: function (event) {
        let thisObj = this
        let file = event.target.files[0]
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
          let base64Code = this.result
          thisObj.photo.push(base64Code)
          thisObj.imgSrc.push(file)
        }
      },
      submit: function () {
        let thisObj = this
        if (!thisObj.addAjax) {
          return false
        }
        thisObj.addAjax = false
        if (thisObj.info.evaluate_content === '') {
          thisObj.$vux.toast.show({
            text: '请填写评价内容',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        thisObj.duo_img(thisObj.imgSrc, function (res) {
          thisObj.$vux.loading.hide()
          if (res === 'error') {
            thisObj.$vux.toast.show({
              text: '提交失败',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            thisObj.addAjax = true
          } else {
            var data = Object.assign(thisObj.info, thisObj.image)
            thisObj.$chaos.ajax({
              data: data,
              slient: true,
              userinfo: true,
              url: 'User/evaluateStaff',
              callback: function (type, res) {
                if (res.status === 'SUCCESS') {
                  thisObj.addAjax = true
                  thisObj.$vux.toast.show({
                    text: res.result.msg,
                    type: 'text',
                    width: '180px',
                    position: 'bottom'
                  })
                  if (thisObj.call === 1) {
                    setTimeout(function () {
                      window.history.go(-2)
                    }, 1000)
                  }
                  setTimeout(function () {
                    window.history.go(-2)
                  }, 1000)
                } else {
                  thisObj.addAjax = true
                  thisObj.$vux.toast.show({
                    text: res.result.msg,
                    type: 'text',
                    width: '180px',
                    position: 'bottom'
                  })
                }
              }
            })
          }
        })
      },
      choiceBtn: function () {
        if (!this.anonymous) {
          this.info.evaluate_type = '匿名'
        } else {
          this.info.evaluate_type = ''
        }
        this.anonymous = !this.anonymous
      },
      clickStars: function (index) {
        this.starsNum = index
        this.info.evaluate_store = this.starsNum + 1
      },
      setmode: function (name, content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website') {
          sessionStorage[name] = JSON.stringify(content)
        } else {
          localStorage[name] = JSON.stringify(content)
        }
      },
      verify: function () {
        this.$chaos.setTitle('评价')
        this.$store.commit('headerShow', true)
        this.$store.commit('title', '评价')
        this.$store.commit('footerShow', false)
        this.user_info.headImg = this.getmode('evaimg')
        this.setmode('evaimg', '')
        this.user_info.username = decodeURI(this.$chaos.getQueryString('name'))
        this.info.order_no = this.$chaos.getQueryString('order_no')
        this.call = this.$chaos.getQueryString('call')
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  body,
  html {
    background: #f9f9f9;
  }
  .file_img{
    width:70px;
    height:70px;
  }
  .file_img >input{
    top:0px;
  }
  .con_term{
    padding: 0px 15px;
  }
  .content .head {
    position: relative;
    padding-top: 1px;
  }
  .content .head .headImg {
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 50%;
    margin: 5px auto;
    margin-top: 30px;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    z-index: 3333;
  }
  .file_img{
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 4444;
    width: 80px;
    height: 50px;
    top: 0px;
  }
  .file_img input{
    width:100%;
    height:100%;
    opacity: 0;
    position: absolute;
    top:15px;
  }
  .upload .uplodaLi:nth-child(4n){
    margin-right:0px!important;
  }
  .content .head .border {
    position: absolute;
    width: 70px;
    height: 70px;
    display: block;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    left: calc(50% - 35px);
    top:25px;
  }

  .content .head p {
    text-align: center;
    color: #fff;
    height: 30px;
    line-height: 30px;
    margin-top: 100px
  }
  .grade {
    padding: 10px 20px;
    background-color: white;
    margin-bottom: 10px;
    position: relative;
    height: 20px;
  }
  .grade > li:nth-child(1) {
    float: left;
    width: 60px;
    color: #a2a2a2;
  }
  .grade > li:nth-child(1) img {
    width: 14px;
    margin-right: 10px;
    vertical-align: -3px;
  }
  .content .grade .anonymous {
    display: block;
    width: 50px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #bbb;
    color: #fff;
    font-size: 14px;
    position: absolute;
    right: 15px;
    top: 8px;
    border-radius: 3px;
  }
  .evaluate-textarea {
    padding: 10px 20px;
    background-color: white;
  }
  .evaluate-textarea textarea {
    height: 150px;
    width: 100%;
  }
  input, button, textarea {
    border: 0;
    margin: 0;
    padding: 0;
    outline: none;
    resize: none;
  }
  .upload {
    margin-top: 15px;
    padding: 0px 15px;
    margin-bottom: 55px;
  }
  .upload {
    overflow: hidden;
  }
  .uplodaLi {
    width: 22%;
    float: left;
    margin-right: 4%;
    overflow: hidden;
    box-sizing: border-box;
     height: 73.5px;
    margin-bottom: 7px;
    position: relative;
  }
  .fill_img {
    width: 100%;
     height: 100%;
    position: relative;
  }
  .uplodaLi img {
    width: 100%;
    height: 100%;
  }
  .fill_img img {
    position: absolute;
    z-index: 1;
  }
  .close {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 20px;
    height: 20px;
    background: #000;
    font-size: 15px;
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    color: #fff;
    z-index: 2;
  }
  .stars li {
    background: url("../assets/image/yy_icon_s_03.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 2px;
  }
  .content .grade .anonymous {
    display: block;
    width: 50px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #bbb;
    color: #fff;
    font-size: 14px;
    position: absolute;
    right: 15px;
    top: 8px;
    border-radius: 3px
  }

  .content .grade .anonymous.choice {
    background: rgb(255, 161, 40)
  }

  .stars {}

  .stars li {
    background: url("../assets/image/yy_icon_s_03.png");
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 2px
  }

  .stars li.yellow {
    background: url("../assets/image/yy_icon_s_02.png");
    background-size: 100% 100%;
  }

  #uploadBtn {
    width: 70px;
    height: 70px;
    background: #fff;
    margin-top: 10px;
    margin-left: 15px
  }
  .content .money {
    background-image: url(../assets/image/yy_bg.png);
    height: 160px;
    position: relative;
    background-size: 100% 100%;
  }
  #uploadBtn img {
    display: block;
    width: 70px;
    height: 70px;
  }
  .bottom{width: 100%;height: 50px;background: #fff;position: fixed;bottom: 0;z-index: 1}
  .bottom .bottomBtn{background: rgb(255,160,40);color: #f5f5f5;width: 92%;height: 40px;line-height: 40px;text-align: center;margin: 0 auto;border-radius: 4px;margin: 5px auto}
  .upload {
    margin-top: 15px;
    padding: 0px 15px;
    margin-bottom: 55px;
  }

</style>
